<template>
  <div class="page-container">
    <el-card shadow="never">
      <div style="margin-bottom: 20px;">
        <el-button type="primary" @click="fetchData">刷新列表</el-button>
      </div>

      <!-- 问题列表 -->
      <el-table :data="tableData" border stripe style="width: 100%" v-loading="loading">
        <el-table-column align="center" prop="username" label="发布人"/>
        <el-table-column align="center" label="状态" width="120">
          <template #default="{ row }">
            <el-tag v-if="row.status === 'pending'" type="warning">待审核</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="createdAt" label="创建时间" width="300">
          <template #default="{ row }">
            {{ formatDate(row.createdAt) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template #default="{ row }">
            <el-button size="small" type="info" @click="viewDetail(row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div style="margin-top: 20px; display: flex; justify-content: right">
        <el-pagination
            background
            layout="total, prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="handlePageChange"
        />
      </div>
    </el-card>
  </div>

  <QuestionDetailDialog ref="detailDialogRef" :fetch-data="fetchData" :show-bottom-btn="false" />
</template>

<script setup>
import {ref} from 'vue';
import request from '@/api/request';
import QuestionDetailDialog from "@/components/QuestionDetailDialog.vue";

const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const loading = ref(false);

// 获取待审批问题列表
const fetchData = () => {
  loading.value = true;
  request.get('/api/comments/pending-review', {
    params: {
      pageNum: currentPage.value,
      pageSize: pageSize.value
    }
  })
      .then(res => {
        const data = res.data.data;
        tableData.value = data.records;
        total.value = data.total;
      })
      .catch(() => {
        tableData.value = [];
        total.value = 0;
      })
      .finally(() => {
        loading.value = false;
      });
};

// 分页变化
const handlePageChange = (page) => {
  currentPage.value = page;
  fetchData();
};

const detailDialogRef = ref()

// 查看详情
const viewDetail = async (row) => {
  row.id = row.questionId;
  detailDialogRef.value.open(row)
};

// 初始化加载数据
fetchData();

// 时间格式化
const formatDate = (isoStr) => {
  return new Date(isoStr).toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.page-container {
  padding: 20px;
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

p {
  line-height: 1.8;
  word-break: break-word;
}
</style>
